<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/assets/css/bootstrap.min.css" />
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="../static/assets/css/jquery-ui.min.css" />
    <link rel="stylesheet" href="../static/assets/css/bootstrap-datepicker3.min.css" />
    <link rel="stylesheet" href="../static/assets/css/ui.jqgrid.min.css" />


    <link rel="stylesheet" href="../static/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

    <link rel="stylesheet" href="../static/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="../static/assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="../static/assets/css/fonts.googleapis.com.css" />
    <link rel="stylesheet" href="../static/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
</head>
<body>

<table id="grid-table"></table>

<div id="grid-pager"></div>

<button class="btn btn-blue" id="bedata">新增</button>


<script src="../static/assets/js/jquery-2.1.4.min.js"></script>
<script src="../static/assets/js/jquery.jqGrid.min.js"></script>
<script src="../static/assets/js/grid.locale-cn.js"></script>
<script src="../static/javascript/java110_req_data.js"></script>


<!-- inline scripts related to this page -->
<script type="text/javascript">

       $(function(){
  pageInit();
});
function pageInit(){
  jQuery("#grid-table").jqGrid(
      {
        url : '../data/list.json',
        datatype : "json",
        colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Closed', 'Ship via', 'Notes' ],
        colModel : [
                    {name : 'id',index : 'id',width : 55,editable : "true",editoptions : {readonly : true,size : 10}},
                    {name : 'invdate',index : 'invdate',width : 80,editable : true,editoptions : {size : 10}},
                    {name : 'name',index : 'name',width : 90,editable : true,editoptions : {size : 25}},
                    {name : 'amount',index : 'amount',width : 60,align : "right",editable : true,editoptions : {size : 10}},
                    {name : 'tax',index : 'tax',width : 60,align : "right",editable : true,editoptions : {size : 10}},
                    {name : 'total',index : 'total',width : 60,align : "right",editable : true,editoptions : {size : 10}},
                    {name : 'closed',index : 'closed',width : 55,align : 'center',editable : true,edittype : "checkbox",editoptions : {value : "Yes:No"}},
                    {name : 'ship_via',index : 'ship_via',width : 70,editable : true,edittype : "select",editoptions : {value : "FE:FedEx;TN:TNT"}},
                    {name : 'note',index : 'note',width : 100,sortable : false,editable : true,edittype : "textarea",editoptions : {rows : "2",cols : "20"}}
                  ],
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        pager : '#pagered',
        sortname : 'id',
        viewrecords : true,
        sortorder : "desc",
        caption : "Search Example",
        editurl : "/RowEditing"
      });
  $("#bedata").click(function() {
    jQuery("#grid-table").jqGrid('editGridRow', "new", {
      reloadAfterSubmit : false
    });
  });
}
		</script>
</body>
</html>